<template>
  <!--横向 row  -->
  <view class="bsteps" :class="['bsteps' + `_${direction}`]" v-if="direction === 'row'">
    <block v-if="stepsType === 1">
      <view v-for="item, indexs in list_" :key="indexs" :style="[styleWidth]" class="stepsItem" :class="[item.class_]">
        <view class="stepsItem_content">
          <view class="stepsItem_content_indexs">{{ indexs + 1 }}</view>
          <view class="stepsItem_content_title">{{ item.title }}</view>
        </view>
        <view class="item-line" v-if="indexs < list_.length - 1" :style="[styleLine, item.styleLine_]"></view>
      </view>
    </block>
    <itemSteps style="width:100%" :fontColor="fontColor" :direction="direction" v-else :list="list_"></itemSteps>
  </view>
  <columnStemps :list="list" :current="current" :inactive="inactive" :active="active" v-else></columnStemps>
</template>
<script setup lang="ts">
// import props from './props';
import itemSteps from './itemSteps/itemSteps.vue'
import columnStemps from "../columnStemps/columnStemps.vue";
import { ref, watch, toRefs, computed, nextTick } from "vue";
export interface Props {
  current?: string | number,
  direction?: string,  //横向 row  纵向 column
  list?: any,
  stepsType?: number | string,  //进度条类型 1是默认
  fontColor?: string,
  inactive?: string,
  active?: string,
}
const props = withDefaults(defineProps<Props>(), {
  current: 0,
  direction: 'row',
  list: [],
  stepsType: 1,
  fontColor: '#fff',
  inactive: '#919191',
  active: '#FF4201'
})
const { current, list, stepsType } = toRefs(props)
const list_ = ref<any>([])
const styleLine = computed(() => {
  let opt = list.value;
  const obj = { height: '3rpx', marginTop: '30rpx', width: `${100 / opt.length + 20}%` }
  if (opt.length == 3) {
    obj.width = '68rpx'
  }
  return uni.$u.addStyle(obj)
})
const styleWidth = computed(() => {
  let opt = list.value;
  const obj: any = {}
  if (opt.length > 2) {
    obj.width = '100%'
  }
  return obj
})
watch(current, (Node: any) => {
  console.log(Node, 'node')
  let arr = []
  list.value.map(item => arr.push({ title: item, class_: '', styleLine_: { background: stepsType.value == 1 ? '#D9D9D9' : 'rgba(0,0,0,0.098)' } }))
  let act = new Array(Node > 0 ? Node - 1 : Node).length > arr.length ? new Array(arr.length) : new Array(Node > 0 ? Node - 1 : Node)  //防止current超过数组长度
  nextTick(() => {
    for (let i = 0; i <= act.length; i++) {
      if (arr[i]) arr[i].class_ = stepsType.value == 1 ? 'stepsItem_active' : 'itemSteps_item_actvie'
      if (i > 0) arr[i - 1].styleLine_.background = stepsType.value == 1 ? '#3270F5' : '#fff'
    }
    list_.value = arr
  })
}, { deep: true, immediate: true })
</script>
<style lang="scss" scoped>
@import "./BSteps.scss";
</style>
